/*slider frame*/
#sliderFrame {position:relative;background-color:transparent;width:800px;margin:auto;}      
        

#slider 
{
    width:800px;height:450px;/* Make it the same size as your images */
	background:#222 url(imgs/loading.gif) no-repeat 50% 50%;
	position:relative;
	margin:auto;
}
#slider img {
        
	position:absolute;
	border:none;
        visibility:hidden;
	
}

/* the link style (if slide image is wrapped in a link) */
#slider a.imgLink {
	z-index:2;
	display:none;position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}




/* ----------- Border ----------- */

#sliderborder1
{
	background:white url(imgs/thumbs-bar.gif) repeat-x 0 0;
	border:0px solid #aaa; 
	font-size:0px;width:800px;margin:auto;
	line-height:45px;
        height:45px;
}
#sliderborder2
{
	background:white url(imgs/thumbs-bar.gif)  repeat-x 0 0;
	border:0px solid #aaa; text-align:center;
	font-size:0px;width:180px;margin:auto;
	line-height:45px;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
	top:460px;/* Its position is relative to the #slider. Don't set #slider "overflow=hidden" if bullets are to be positioned outside of the #slider. */
	width:800px;
	background:none;
	position:relative;
	z-index:5;
	cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(imgs/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin:7px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/*----------- navigation buttons on both sides of the slider -----------*/
.group1-Wrapper 
{
    position:absolute;
    z-index:20;
    top:150px;
    margin-left:50%;/* position it in the middle of #sliderFrame */
    width:1px;
}
a.group1-Prev, a.group1-Next
{
    width:50px;height:150px;
    background:transparent url(imgs/navButtons2.gif); 
    display:block; 
    cursor:pointer;
    position:absolute;
    top:0;
    user-select: none;
}
a.group1-Prev{background-position:0 0; left: -420px;}
a.group1-Next {background-position:0 -150px;left:370px;}

a.group1-Prev:hover{background-position:50px 0;}
a.group1-Next:hover {background-position:50px -150px;}


/* ----------- navigation buttons in the thumbnails bar ---------- */
a.group2-Prev, a.group2-Next, a.group2-Play, a.group2-Pause 
{
    width:20px; height:20px;
    background:transparent url(imgs/navButtons.gif); 
    display:inline-block; 
    *display:inline;zoom:1;/*IE hack*/
    margin:auto 10px;
    vertical-align:middle;
    cursor:pointer;
}
a.group2-Pause{background-position:0 0;}
a.group2-Play {background-position:0 -20px;}
a.group2-Next {background-position:0 -40px;}
a.group2-Prev {background-position:0 -60px;} 

a.group2-Pause:hover{background-position:20px 0;}
a.group2-Play:hover {background-position:20px -20px;}
a.group2-Next:hover {background-position:20px -40px;}
a.group2-Prev:hover {background-position:20px -60px;} 




/* --------- Others ------- */

#slider 
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}


/*For tooltip target element that has set class="tooltip" */
.tooltip {display: none; }

/*For tooltip box*/
div#mcTooltip 
{
    border-width: 1px;   
    border-color:#aaaaaa;
    background-color:#111111;
    font-size: 0px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 16px #AAAAAA; 
    -o-box-shadow: 0 1px 16px #AAAAAA; 
    -ms-box-shadow: 0 1px 16px #AAAAAA; 
    -webkit-box-shadow: 0 1px 16px #AAAAAA; 
    -khtml-box-shadow: 0 1px 16px #AAAAAA; 
    box-shadow: 0 1px 16px #AAAAAA; 
}

/* For hyperlink within tooltip */
div#mcTooltip a { display:none; }          


/*The settings below should remain unchanged*/
div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px;}
div#mcTooltip {float:left;border-style:solid;position:relative;overflow:hidden;}
div#mcttCo {position:absolute;text-align:left;}
div#mcttCo em, div#mcttCo b {display:block; width:0; height:0;overflow:hidden;}
